<template>
	<view @touchstart="clickPage">
		<menuheader ref='menuheader' icon='acc' :iconsize="18">饮食方案</menuheader>
		<view class='date-bar'>
			<swiper :current='currWeekIndex' class='week-list' @change='changeWeek' duration="0">
				<swiper-item v-for="(dayList, weekIndex) in weekList" :key="weekIndex" vertical="true">
					<view class='week-block'>
						<block v-for="(day, dayIndex) in dayList" :key="dayIndex">
							<view class='week-item' @click="clickDate" :data-date="day.dateStr" v-if="day.currdate_flag==1">
								<view class='date-currdate cor-white bgcor-b' v-if='day.selected_flag==1'>今</view>
								<view class='date-currdate cor-white bgcor-o' v-if='day.selected_flag==0'>今</view>
							</view>
							<view class='week-item' @click="clickDate" :data-date="day.dateStr" v-else>
								<view class='date-week' :class='dayIndex==currDayIndex?"cor-b":""'>{{day.week}}</view>
								<view class='date-day' :class='dayIndex==currDayIndex?"cor-b":""'>{{day.day}}</view>
							</view>
						</block>
					</view>
				</swiper-item>
			</swiper>
			<view class='date-picker'>
				<image src='/static/image/ico-calendar-blue.png' mode='widthFix' class='i2' @click="popCalendar"></image>
				<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="calendarConfig.clearDate" :insert="calendarConfig.insert" :lunar="calendarConfig.lunar" :showMonth='calendarConfig.showMonth'
					:date='strSelected' @confirm="confirmCalendar" @close="hideCalendar" @change="changeCalendar"/>
			</view>
		</view>
		<swiper :current='currDayIndex' class='week-foodmenulist' :style='{height: energyBoxSwiperHeight + "px"}' @change='changeDay'>
			<swiper-item v-for="(weekFoodMenu, weekFoodMenuIndex) in weekFoodMenuList" :key="weekFoodMenuIndex" vertical="true">
				<view class='energy-box'>
					<view class='energy-dashboard'>
						<view class='energy-btnbar'>个人配餐<uni-icons type="info" size="20" class='energy-setting' :color='setting.corb'></uni-icons></view>
						<view class='energy-btnbar' @click="goSetting">家庭配餐<uni-icons type="settings" size="20" class='energy-setting' :color='setting.corb'></uni-icons></view>
					</view>
					<view class='energy-dashboard'>
						<view class='energy-nutrition' :style='{width: setting.windowWidth/4 + "px", height: setting.windowWidth/4 + "px"}'>
							<view class='energy-title'>推荐摄入热量</view>
							<view class='energy-total'>{{weekFoodMenu.nutrition.totalMinEnergy}}~{{weekFoodMenu.nutrition.totalMaxEnergy}}</view>
							<view class='energy-unit'>千卡</view>
						</view>
						<view class='energy-person' :style='{width: setting.windowWidth/4 + "px", height: setting.windowWidth/4 + "px"}'>
							<view class='energy-title'>就餐人员</view>
							<view class='energy-total'>3人</view>
							<view class='energy-unit'>详情</view>
						</view>
					</view>
					<view class='energy-labels'>
						<view class='energy-label'>
							<view class='energy-square bgcor-o'></view>
							<view class='energy-remark'>偏低</view>
						</view>
						<view class='energy-label'>
							<view class='energy-square bgcor-b'></view>
							<view class='energy-remark'>适中</view>
						</view>
						<view class='energy-label'>
							<view class='energy-square bgcor-r'></view>
							<view class='energy-remark'>偏高</view>
						</view>
					</view>
					<view class='energy-summary'>
						<view :class='"energy-" + weekFoodMenuIndex' class='summary-item' v-for="(energy, energyIndex) in weekFoodMenu.nutrition.energyList" :key="energyIndex" 
							@click.stop="displayEnergyHint" :data-energyindex='energyIndex' :data-weekindex='weekFoodMenuIndex'>
							<view class='summary-label'>
								<text class='summary-hint-label'>{{energy.label}}热量<!-- ({{energy.intake}}) --></text>
								<view class='summary-hint-icon'><uni-icons type="help" size="14"></uni-icons></view>
							</view>
							<progress v-if='energy.intake<energy.min' class='summary-progress' :percent='energy.percent' border-radius='10' stroke-width='10' :activeColor='setting.coro' :backgroundColor='setting.corgw'></progress>
							<progress v-else-if='energy.intake<energy.max' class='summary-progress' :percent='energy.percent' border-radius='10' stroke-width='10' :activeColor='setting.corb' :backgroundColor='setting.corgw'></progress>
							<progress v-else class='summary-progress' :percent='energy.percent' border-radius='10' stroke-width='10' :activeColor='setting.corr' :backgroundColor='setting.corgw'></progress>
							<!-- <view class='summary-label'>{{energy.min}}~{{energy.max}}(千卡)</view> -->
						</view>
					</view>
					<view class='energy-summary'>
						<view :class='"amdr-" + weekFoodMenuIndex' class='summary-item' v-for="(amdr, amdrIndex) in weekFoodMenu.nutrition.amdrList" :key="amdrIndex" 
							@click.stop="displayAmdrHint" :data-amdrindex='amdrIndex' :data-weekindex='weekFoodMenuIndex'>
							<view class='summary-label'>
								<text class='summary-hint-label'>{{amdr.label}}<!-- ({{amdr.intake}}) --></text>
								<view class='summary-hint-icon'><uni-icons type="help" size="14"></uni-icons></view>
							</view>
							<progress v-if='amdr.intake<amdr.min' class='summary-progress' :percent='amdr.percent' border-radius='10' stroke-width='10' :activeColor='setting.coro' :backgroundColor='setting.corgw'></progress>
							<progress v-else-if='amdr.intake<amdr.max' class='summary-progress' :percent='amdr.percent' border-radius='10' stroke-width='10' :activeColor='setting.corb' :backgroundColor='setting.corgw'></progress>
							<progress v-else class='summary-progress' :percent='amdr.percent' border-radius='10' stroke-width='10' :activeColor='setting.corr' :backgroundColor='setting.corgw'></progress>
							<!-- <view class='summary-label'>{{amdr.min}}/{{amdr.max}}(克)</view> -->
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<swiper class='foodmenu-swiper' :current="currFoodMenuIndex" :style="{height: currFoodMenuSwiperHeight + 30 + 'px'}" @change="changeFoodMenu">
			<block v-for="(weekFoodMenu, weekFoodMenuIndex) in weekFoodMenuList" :key="weekFoodMenuIndex">
				<swiper-item v-for="(foodMenu, foodMenuIndex) in weekFoodMenu.foodMenuList" :key="foodMenuIndex" class='foodmenu-swiper-item'>
					<view class='foodmenu-item'>
						<view class='foodmenu-wrapper'>
							<view class='foodmenu-header'>
								<view class='foodmenu-title'>{{foodMenu.name}}</view>
								<view class='foodmenu-energy'>{{foodMenu.energy}}千卡</view>
							</view>
							<view class='food-list'>
								<view class='food-item' v-for="(food, foodIndex) in foodMenu.foodList" :key="foodIndex" @click.stop='showFoodDetail' 
									:data-weekindex='weekFoodMenuIndex' :data-menuindex='foodMenuIndex' :data-foodindex='foodIndex'>
									<image :src="food.cover" mode="widthFix" class='food-image' @load="foodImageLoad" 
										:data-weekindex='weekFoodMenuIndex' :data-foodindex='foodIndex'></image>
									<view class='food-name'>{{food.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<uni-tooltip ref='nutritiontooltip'></uni-tooltip>
		<menufooter ref='menufooter' current="ai"></menufooter>
		<personinfo ref='personinfo'></personinfo>
		<fooddetail ref='fooddetail'></fooddetail>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import dateutil from '@/lib/dateutil.js';
	
	export default {
		data() {
			return {
				currWeekIndex: 1,
				weekChangeFlag: false,
				currDayIndex: 0,
				energyBoxSwiperHeight: 0,
				dayChangeFlag: false,
				currFoodMenuIndex: 0,
				currFoodMenuSwiperHeight: 0,
				foodMenuChangeFlag: false,
				
				weekList: [],
				strSelected: '',
				calendarConfig: {
					lunar: false,
					range: false,
					insert: false,
					showMonth: true,
					clearDate: false,
					selected: []
				},
				strSelectedDate: dateutil.formatDate(dateutil.getCurrDate()),
				weekFoodMenuList: [
					{date: '2023-10-23', week: '周一', 
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}]},
							foodMenuList: [
								{name: '早餐', energy: 433, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '午餐', energy: 643, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '晚餐', energy: 1065, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]}]
					},
					{date: '2023-10-24', week: '周二',
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}]},
							foodMenuList: [
								{name: '早餐', energy: 433, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '午餐', energy: 643, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '晚餐', energy: 1065, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]}]
					},
					{date: '2023-10-25', week: '周三',
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}]},
							foodMenuList: [
								{name: '早餐', energy: 433, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '午餐', energy: 643, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '晚餐', energy: 1065, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]}]
					},
					{date: '2023-10-26', week: '周四',
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}],
						},
						foodMenuList: [
							{name: '早餐', energy: 433, foodList: [
								{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
							{name: '午餐', energy: 643, foodList: [
								{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
							{name: '晚餐', energy: 1065, foodList: [
								{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
								{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
						}]
					},
					{date: '2023-10-27', week: '周五',
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}]},
							foodMenuList: [
								{name: '早餐', energy: 433, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '午餐', energy: 643, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '晚餐', energy: 1065, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]}]
					},
					{date: '2023-10-28', week: '周六',
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}]},
							foodMenuList: [
								{name: '早餐', energy: 433, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '午餐', energy: 643, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '晚餐', energy: 1065, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]}]
					},
					{date: '2023-10-29', week: '周日',
						nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
							energyList: [
								{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, unit:'kcal', percent: 146 * 100 / 433 / 1.2}, 
								{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, unit:'kcal', percent: 643 * 100 / 733 / 1.2}, 
								{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, unit:'kcal', percent: 1065 * 100 / 733 / 1.2}],
							amdrList: [
								{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, unit:'g', percent: 18 * 100 / 32 / 1.2}, 
								{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, unit:'g', percent: 25 * 100 / 23 / 1.2}, 
								{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, unit:'g', percent: 11 * 100 / 20 / 1.2}]},
							foodMenuList: [
								{name: '早餐', energy: 433, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '午餐', energy: 643, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]},
								{name: '晚餐', energy: 1065, foodList: [
									{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
									{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}]}]
					}
				],
				setting: {windowWidth: 0, windowHeight: 0}
			}
		},
		
		onReady() {
			let that = this;
			gui.init(this);
			setTimeout(()=>{
				that.flushGuiHeight();
			}, 200)
		},
		
		onShow(){
		},
		
		onLoad(options) {
			console.log('this.strSelectedDate = ' + this.strSelectedDate);
			this.genDateLabels(dateutil.parseDate(this.strSelectedDate), this.strSelectedDate);
		},
		
		mounted(){
		},
		
		methods: {
			flushGuiHeight(){
				var that = this;
				let queryEnergyBox = uni.createSelectorQuery().in(that).select('.energy-box');
				queryEnergyBox.boundingClientRect((rectEnergyBox)=>{
					that.energyBoxSwiperHeight=rectEnergyBox.height;
				}).exec();
				
				let queryFoodMenuBox = uni.createSelectorQuery().in(that).selectAll('.foodmenu-item');
				queryFoodMenuBox.boundingClientRect((rectFoodMenuArr)=>{
					that.currFoodMenuSwiperHeight=rectFoodMenuArr[that.currFoodMenuIndex].height;
				}).exec();
			},
			
			foodImageLoad(e){
				var weekindex = e.currentTarget.dataset.weekindex;
				var foodindex = e.currentTarget.dataset.foodindex;
				this.flushGuiHeight();
			},
			
			clickPage(){
				this.$refs['nutritiontooltip'].close();
			},
			
			displayEnergyHint(e){
				var weekindex = e.currentTarget.dataset.weekindex;
				var energyindex = e.currentTarget.dataset.energyindex;
				let queryBox = uni.createSelectorQuery().in(this).selectAll('.summary-item.energy-' + weekindex);
				queryBox.boundingClientRect((rectBoxArr)=>{
					
					var energyObj = this.weekFoodMenuList[weekindex].nutrition.energyList[energyindex];
					var msgArr = ['推荐量：' + energyObj.min + '~' + energyObj.max + '('+energyObj.unit+')',
						'菜单含量：' + energyObj.intake + '(' + energyObj.unit +')'];
					this.$refs['nutritiontooltip'].openOnPosition(rectBoxArr[energyindex], '', msgArr);
					
				}).exec();
			},
			
			displayAmdrHint(e){
				var weekindex = e.currentTarget.dataset.weekindex;
				var amdrindex = e.currentTarget.dataset.amdrindex;
				let queryBox = uni.createSelectorQuery().in(this).selectAll('.summary-item.amdr-' + weekindex);
				queryBox.boundingClientRect((rectBoxArr)=>{
					
					var amdrObj = this.weekFoodMenuList[weekindex].nutrition.amdrList[amdrindex];
					var msgArr = ['推荐量：' + amdrObj.min + '~' + amdrObj.max + '('+amdrObj.unit+')',
						'菜单含量：' + amdrObj.intake + '(' + amdrObj.unit +')'];
					this.$refs['nutritiontooltip'].openOnPosition(rectBoxArr[amdrindex], '', msgArr);
					
				}).exec();
			},
			
			/*后台读取数据，重新生成一周的菜谱*/
			changeWeek(e){
				var that = this;
				if(!that.weekChangeFlag && !that.dayChangeFlag && !that.foodMenuChangeFlag){
					that.flushGuiHeight();
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					setTimeout(function(){
						uni.hideLoading();
						
						that.weekChangeFlag=true;
						that.currWeekIndex=e.detail.current;
						if(that.currWeekIndex<1){
							that.dtSelected=dateutil.getDateWithOffsetWeek(that.dtSelected, -1);
							that.genDateLabels(that.dtSelected, that.strSelected);
						}else if(that.currWeekIndex>1){
							that.dtSelected=dateutil.getDateWithOffsetWeek(that.dtSelected, 1);
							that.genDateLabels(that.dtSelected, that.strSelected);
						}
						
					}, 500)
					
				}else{
					if(that.dayChangeFlag){
						that.dayChangeFlag=false;
					}
									
					if(that.foodMenuChangeFlag){
						that.foodMenuChangeFlag=false;
					}
					
					if(that.weekChangeFlag){
						that.weekChangeFlag=false;
					}
				}
			},
			
			/*设置*/
			changeDay(e){
				var that = this;
				if(!this.weekChangeFlag && !this.foodMenuChangeFlag){
					that.flushGuiHeight();
					this.dayChangeFlag=true;
					this.currDayIndex=e.detail.current;
					this.currFoodMenuIndex=3 * this.currDayIndex;
					console.log('this.currDayIndex = ' + this.currDayIndex);
					console.log('this.currFoodMenuIndex = ' + this.currFoodMenuIndex);
					
					var weekList = this.weekList;
					for(var i=0; i<weekList[this.currWeekIndex].length; i++){
						if(i==this.currDayIndex){
							weekList[this.currWeekIndex][i].selected_flag = 1;
						}else{
							weekList[this.currWeekIndex][i].selected_flag = 0;
						}
					}
					this.weekList=weekList;
					console.log(weekList[this.currWeekIndex]);
				}else{
					if(this.weekChangeFlag){
						this.weekChangeFlag=false;
					}
									
					if(this.foodMenuChangeFlag){
						this.foodMenuChangeFlag=false;
					}
				}
			},
			
			changeFoodMenu(e){
				var that = this;
			    if(!this.weekChangeFlag && !this.dayChangeFlag){
					that.flushGuiHeight();
					this.foodMenuChangeFlag=true;
					this.currFoodMenuIndex = e.detail.current;
					if(this.currDayIndex != parseInt(this.currFoodMenuIndex/3)){
						this.currDayIndex = parseInt(this.currFoodMenuIndex/3);
						console.log('this.currFoodMenuIndex = ' + this.currFoodMenuIndex + ', this.currDayIndex = ' + this.currDayIndex);
						
						var weekList = this.weekList;
						for(var i=0; i<weekList[this.currWeekIndex].length; i++){
							if(i==this.currDayIndex){
								weekList[this.currWeekIndex][i].selected_flag = 1;
							}else{
								weekList[this.currWeekIndex][i].selected_flag = 0;
							}
						}
						this.weekList=weekList;
					}
				}else{
					if(this.weekChangeFlag){
						this.weekChangeFlag=false;
					}
				
					if(this.dayChangeFlag){
						this.dayChangeFlag=false;
					}
				}
			},
			
			genDateLabels(dtSelected, strSelected){
				this.dtSelected=dtSelected;
				this.strSelected=strSelected;
				var arr = [];
				arr.push(dateutil.genWeekLabels(dateutil.getDateWithOffsetWeek(dtSelected, -1)));
				arr.push(dateutil.genWeekLabels(dtSelected));
				arr.push(dateutil.genWeekLabels(dateutil.getDateWithOffsetWeek(dtSelected, 1)));
				this.weekList=arr;
				this.flushWeek();
			},
			
			clickDate(e){
				this.strSelected=e.currentTarget.dataset.date;
				this.flushWeek();
			},
			
			flushWeek(){
				var that = this;
				var weekList = this.weekList;
				var strCurrDate = dateutil.formatDate(dateutil.getCurrDate());
				for(var i=0; i<weekList.length; i++){
					for(var j=0; j<weekList[i].length; j++){
						if(weekList[i][j].dateStr == strCurrDate){
							weekList[i][j].currdate_flag = 1;
						}else{
							weekList[i][j].currdate_flag = 0;
						}
						
						if(weekList[i][j].dateStr == this.strSelected){
							weekList[i][j].selected_flag = 1;
							this.dayChangeFlag=true;
							this.foodMenuChangeFlag=true;
							this.currDayIndex=j;
							this.currFoodMenuIndex=j*3;
						}else{
							weekList[i][j].selected_flag = 0;
						}
					}
				}
				this.weekList=weekList;
				this.$nextTick(function() {
					this.currWeekIndex=1;
					that.flushGuiHeight();
				});
			},
			
			popCalendar() {
				this.$refs.calendar.open();
			},
			
			hideCalendar(){
				console.log('弹窗关闭');
			},
			
			changeCalendar(e) {
				console.log('change 返回:', e)
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '打卡'
				})
			},
			
			confirmCalendar(e) {
				if(this.strSelected != e.fulldate){
					console.log('this.strSelected = ' + this.strSelected);
					console.log('e.fulldate = ' + e.fulldate);
					this.genDateLabels(dateutil.parseDate(e.fulldate), e.fulldate);
				}
			},
			
			goSetting(){
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否前往生成家庭菜单？',
					cancelText: '取消',
					cancelColor: that.setting.corg,
					confirmText: '立即前往',
					confirmColor: that.setting.corb,
					success(res){
						if(res.confirm){
							uni.navigateTo({
								url: '/pages/foodmenu/setting/config?strdate=' + that.strSelected
							})
						}
					}
				})
			},
			
			showFoodDetail(e){
				var that = this;
				var weekindex = e.currentTarget.dataset.weekindex;
				var menuindex = e.currentTarget.dataset.menuindex;
				var foodindex = e.currentTarget.dataset.foodindex;
				var food = this.weekFoodMenuList[weekindex].foodMenuList[menuindex].foodList[foodindex];
				let queryBox = uni.createSelectorQuery().in(that).selectAll('.food-item');
				queryBox.boundingClientRect((rectArr)=>{
					console.log(rectArr[that.currFoodMenuIndex]);
					that.$refs['fooddetail'].show({top: rectArr[that.currFoodMenuIndex].top, food: food});
				}).exec();
			}
		}
	}
</script>

<style>
	@import url(@/common/app.css);
	
	.date-bar{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.week-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 90%;
		height: 60px;
	}
	
	.date-picker{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 10%;
	}
	
	.week-block{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 60px;
	}
	
	.week-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 14%;
		font-size: 14px;
		color: #999;
	}
	
	.date-currdate{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 14%;
		height: 32px;
		width: 32px;
		border-radius: 100%;
		font-weight: bold;
		font-size: 16px;
	}
	
	.date-week{
		font-weight: bold;
	}
	
	.energy-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 0px 0px 10px 0px;
	}
	
	.energy-dashboard{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}
	
	.energy-btnbar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50%;
		padding: 6px 0px;
		font-size: 14px;
		color: #33b4ff;
	}
	
	.energy-nutrition{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		padding: 20px;
		border: 15px solid #f1f1f1;
		border-radius: 100%;
		position: relative;
	}
	
	.energy-person{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		padding: 20px;
		border: 15px solid #f1f1f1;
		border-radius: 100%;
		position: relative;
	}
	
	.energy-setting{
		
	}
	
	.energy-title{
		display: flex;
		flex-direction: column;
		justify-content: column;
		align-items: center;
		width: 100%;
		font-size: 13px;
	}
	
	.energy-total{
		display: flex;
		flex-direction: column;
		justify-content: column;
		align-items: center;
		width: 100%;
		color: #333;
		font-size: 18px;
		font-weight: bold;
		padding: 5px 0px 5px 0px;
	}
	
	.energy-unit{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 13px;
	}
	
	.energy-labels{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		font-size: 12px;
		height: 32px;
	}
	
	.energy-label{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 10px;
	}
	
	.energy-square{
		background-color: #333;
		width: 10px;
		height: 10px;
		margin-right: 5px;
	}
	
	.energy-remark{
		font-size: 12px;
	}
	
	.energy-summary{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: calc( 100% - 20px );
		padding: 10px 10px 0px 10px;
	}
	
	.summary-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 25%;
		font-size: 12px;
	}
	
	.summary-label{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		color: #999;
	}
	
	.summary-hint-label{
	}
	
	.summary-hint-icon{
		padding-left: 2px;
	}
	
	.summary-progress{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 4px 0px;
	}
	
	.foodmenu-swiper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 0px;
	}
	
	.foodmenu-swiper-item{
		background-color: #f1f1f1;
	}
	
	.foodmenu-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		background-color: #f1f1f1;
	}
	
	.foodmenu-wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		background-color: #fff;
		margin: 10px 0px;
		border-radius: 15px;
	}
	
	.foodmenu-header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-weight: bold;
		font-size: 16px;
		margin: 12px 0px 0px 0px;
		padding-bottom: 12px;
		border-bottom: 1px solid #f1f1f1;
	}
	
	.foodmenu-title{
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		width: calc( 70% - 15px );
		padding-left: 15px;
	}
	
	.foodmenu-energy{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: calc( 30% - 15px );
		padding-right: 15px;
	}
	
	.food-list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
	}
	
	.food-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: calc( 50% - 5px );
		position: relative;
		margin-bottom: 10px;
	}
	
	.food-item:nth-of-type(even){
		margin-left: 10px;
	}
	
	.food-image{
		width: 100%;
	}
	
	.food-name{
		color: #fff;
		text-align: left;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		width: calc( 100% - 15px );
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		font-weight: bold;
		padding-left: 15px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		background-color: rgba(0,0,0,0.5);
	}
</style>